import React from 'react'
// useSelector的作用: 帮我们监听redux数据的变化,当数据变化之后,让组件更新.更新还能帮我们过滤数据
import { useSelector, useDispatch } from 'react-redux'

import zsSlice, { asyncCount } from '../zsRedux/slice'

const { add, sub } = zsSlice.actions

export default function Count() {
  const count = useSelector((state) => {
    // console.log('count', state)
    return state.zs.count
  })
  // 这个dispatch其实就是store.dispatch
  const dispatch = useDispatch()
  return (
    <div>
      <h1>Count</h1>
      <hr />
      <p>{count}</p>
      <button
        onClick={() => {
          dispatch(add(2))
        }}
      >
        + 2
      </button>
      <button
        onClick={() => {
          dispatch(add(6))
        }}
      >
        + 6
      </button>
      <button
        onClick={() => {
          dispatch(sub(1))
        }}
      >
        - 1
      </button>
      <button
        onClick={() => {
          dispatch(asyncCount(888))
        }}
      >
        async + 8
      </button>
    </div>
  )
}
